{{!< default}}

{{#post}}

{{!-- Content  --}}
<main class="post-container container" role="main">
    <div class="row no-gutters justify-content-center bg-white border">
        <article class="post-content col-md-8 {{post_class}}">
            {{!-- post header --}}
            <header class="post-full-header">
                <section class="post-full-meta">
                    <time class="post-full-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMMM YYYY"}}</time>
                    {{#if tags}}
                        <span class="date-divider">/</span> <a href="{{@blog.url}}/tag/{{tags.[0].slug}}">{{tags.[0].name}}</a>
                    {{/if}}
                </section>
                <h2 class="post-full-title">{{title}}</h2>
            </header>

            {{!-- post content --}}
            <section class="post-full-content">
                {{!-- Post Feature Image  --}}
                {{#if feature_image}}
                    <img class="post-feature-image" src="{{img_url feature_image absolute="true"}}">
                {{/if}}
                {{content}}
            </section>

            {{!-- Author profile --}}
            <footer class="post-full-footer d-flex justify-content-between align-items-center">
                {{#author}}
                <section class="author-card d-flex align-items-center">
                    {{#if profile_image}}
                        <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
                    {{/if}}
                    <section class="author-card-content">
                        <h4 class="author-card-name"><a href="{{url}}">{{name}}</a></h4>
                        {{#if bio}}
                            <p>{{bio}}</p>
                        {{else}}
                            <p>查看作者的更多<a href="{{url}}">文章</a></p>
                        {{/if}}
                    </section>
                </section>
                
                <a class="btn btn-outline-primary" href="{{url}}">阅读更多</a>
                {{/author}}
            </footer>
        </article>
    </div>
</main>

{{> "pagination"}}

{{/post}}

{{#contentFor "scripts"}}
<script>
    $(document).ready(function () {
        // Start fitVids 调整视频播放器
        var $postContent = $(".post-content");
        $postContent.fitVids();
        // End fitVids

        // 调整时间格式
        $('.post-full-meta-date').each(function(i, date) {
            var $date = $(date);
            $date.html(moment($date.attr('datetime')).calendar());
        });
        // 调整时间格式
    });
</script>
{{/contentFor}}